<template>
  <div ref="echarts-pie" style="height: 220px" />
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  name: 'EcharsPie',
  props: {
    abnormalProject: {
      type: Object,
      default: () => {}
    },
    legend: {
      type: Array,
      default: () => ['异常的项目', '无异常的项目']
    }
  },
  data() {
    return {
      myChart: null // 用来存放图形实例
    }
  },
  watch: {
    abnormalProject(values) {
      this.initEcharts(values)
    }
  },
  mounted() {
    this.initEcharts(this.abnormalProject)
  },
  beforeDestroy() {
    // 销毁监听事件
    window.removeEventListener('resize', this.resizeHandler)
    // 销毁 Echarts 实例
    this.myChart && this.myChart.dispose()
  },
  methods: {
    initEcharts(abnormalProject) {
      const { proportion, abnormalPro, noAbnormalPro } = abnormalProject
      const data = [
        { value: abnormalPro, name: '异常的项目' },
        { value: noAbnormalPro, name: '无异常的项目' }
      ]
      this.myChart = echarts.init(this.$refs['echarts-pie'])
      const arr = ['middleLost', data, proportion, '异常项目占比']
      const options = {
        title: {
          top: '55%',
          left: 'center',
          textStyle: {
            color: '#ad7c59',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontSize: 16
          },
          subtext: arr[2] + '%',
          subtextStyle: {
            color: '#185a9d',
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 0,
          top: 10,
          show: true,
          itemGap: 12,
          data: this.legend,
          textStyle: {
            color: '#6AA4F5'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function(res) {
            if (res.componentSubType === 'liquidFill') {
              return res.seriesName + ':' + proportion
            } else {
              return (
                '<span class="ii" style="background:' + res.color + '"></span>' + res.name + ':<br/> ' + res.data.value
              )
            }
          }
        },
        series: [
          {
            type: 'liquidFill',
            itemStyle: {
              normal: {
                opacity: 0.4,
                shadowBlur: 0,
                shadowColor: 'blue'
              }
            },
            name: arr[3],
            data: [
              {
                value: 0.4,
                itemStyle: {
                  normal: {
                    color: '#53d5ff',
                    opacity: 0.6
                  }
                }
              }
            ],
            color: ['#53d5ff'],
            center: ['50%', '65%'],
            label: {
              normal: {
                formatter: '',
                textStyle: {
                  fontSize: 12
                }
              }
            },
            outline: {
              itemStyle: {
                borderColor: '#86c5ff',
                borderWidth: 0
              },
              borderDistance: 0
            }
          },
          {
            type: 'pie',
            center: ['50%', '65%'],
            radius: ['45%', '60%'],
            color: ['#ff9580', '#64b3ff'],
            hoverAnimation: false, // 设置饼图默认的展开样式
            label: {
              show: true,
              normal: {
                formatter: '{b}：{c}',
                show: false,
                position: ''
              }
            },
            labelLine: {
              length: 12,
              length2: 20,
              show: false
            },
            itemStyle: {
              // 此配置
              normal: {
                borderWidth: 0,
                borderColor: '#fff'
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 2,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: arr[1]
          }
        ]
      }
      this.myChart.setOption(options)
      // 绑定监听事件
      window.addEventListener('resize', this.resizeHandler)
      this.myChart.on('click', this.setProject)
    },
    resizeHandler() {
      // 图形根据容器大小来进行缩放
      this.myChart.resize()
    },
    setProject({ name }) {
      this.$emit('setProject', name)
    }
  }
}
</script>

